<template>
	<view class="container">
		<view class="tabs">
			<uv-sticky bgColor="#fff">
				<uv-tabs
					:scrollable="false"
					lineColor="#FF9901"
					:activeStyle="{
						color: '#FF9901'
					}"
					:list="tabs"
					@change="handleTabCchange"
				/>
			</uv-sticky>
		</view>
		<uni-search-bar
			radius="100"
			placeholder="搜索"
			clearButton="none"
			cancelButton="none"
			@confirm="search"
			class="search"
			bgColor="#fff"
		/>
		<view class="cards" v-if="orders?.length >= 1">
			<view class="card" v-for="order in orders" :key="order.id">
				<view class="header">
					<view>{{ order.createTime }}</view>
					<view
						style="font-size: 28rpx; text-align: right"
						:style="{ color: getOrderStatusColor(order.status) }"
					>
						{{ getOrderStatusName(order.status) }}
					</view>
				</view>
				<view class="main" @click="toInfo(order.id)">
					<view class="title">{{ order.title }}</view>
					<view class="left">姓名（班级）</view>
					<view class="right">
						<text class="username">{{ order.username }}</text>
						({{ order.classname }})
					</view>
				</view>
				<view class="footer" v-if="order.status < 2">
					<view style="flex-grow: 1"></view>
					<button type="warn" size="mini">去支付</button>
				</view>
			</view>
		</view>
		<view v-else class="empty">
			<image src="@/static/empty.png" mode="heightFix"></image>
			- 这里空空如也 -
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const tabs = [
	{
		name: '全部',
		status: null
	},
	{
		name: '已支付',
		status: 2
	},
	{
		name: '未支付',
		status: 1
	}
]
const queryParams = ref({
	status: null
})

const orders = ref([
	{
		id: 1,
		status: 1,
		createTime: '2023-09-20 18:50:36',
		title: '京师幼学课间操户外绘画学习活动',
		username: '周杰伦',
		classname: '大班'
	},
	{
		id: 2,
		status: 2,
		createTime: '2023-09-20 18:50:36',
		title: '京师幼学课间操户外绘画学习活动',
		username: '刘耕宏',
		classname: '大班'
	}
])
function handleTabCchange(e) {
	console.log(e)
	queryParams.value.status = e.status
	search()
}
function search() {}

function getOrderStatusColor(status) {
	const rs = {}
	switch (status) {
		case 1:
			return 'red'
		case 2:
			return '#FF9901'
	}
	return '#999999'
}

function getOrderStatusName(status) {
	switch (status) {
		case 1:
			return '未支付'
		case 2:
			return '已完成'
	}
	return '未知'
}

function toInfo(id) {
	uni.navigateTo({
		url: '/pages/info/info'
	})
}
</script>

<style lang="less" scoped>
.tabs {
	border-radius: 0px 0px 20px 20px;
	overflow: hidden;
}
.search {
	margin-top: 0;
}
.cards {
	width: 100%;
	padding: 0 20rpx 20rpx;
	box-sizing: border-box;

	.card {
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0px 3px 60px 0px rgba(51, 51, 51, 0.05);
		border-radius: 20px;
		padding: 1rem;
		margin-bottom: 20rpx;

		.header {
			display: grid;
			grid-template-columns: 1fr 4rem;
			border-bottom: 2px solid #eeeff0;
			padding-bottom: 1rem;
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}

		.main {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			margin: 30rpx 0;

			.title {
				grid-column: span 2;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.left,
			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.right {
				text-align: right;

				.username {
					font-weight: bold;
					color: #fba752;
				}
			}
		}
		.footer {
			display: flex;
			justify-content: flex-end;
		}
	}
}
.empty {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 100rpx;
	font-weight: 500;
	color: #cccccc;
	font-size: 24rpx;
}
</style>
